<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/main.css?ver=${main_css_version}" rel="stylesheet" type="text/css" />
<title>${projectTitle }</title>
</head>
<body>
  <header id="main-top">
    <a href="javascript:void(0);" id="back">
      <div id="main-top-left" >
        <img src="${ctx}/images/mui_title_back_btn.png" class="img-2">
      </div>
    </a>
    <div id="main-top-title">常用乘客</div>
    <a href="javascript:void(0);" id="passenglistsubmit">
      <div id="main-top-right">完成</div>
    </a>
  </header>
  <div id="container">
    <div id="often-passenger">
     <form action="" method="get" id="form">
      <ul>
        <a href="javascript:void(0);">
          <li id="addpassenger">
            <div class="add">
              <img src="${ctx}/images/add-img.png" class="img-7">
            </div>
            <div class="add-passenger" style="">
                                       添加新乘客
              <span class="more" style="padding-top: 3px;">
                <img src="${ctx}/images/blue-next-lightblue.png" class="img-4">
              </span>
            </div>
          </li>
        </a>
        <c:forEach items="${passengerlist.passengers}" var="passenger" varStatus="status">
	       <li passenger="passenger" id="passengerli${status.index}" <c:if test="${cf:isDisablePassenger(orderPaymentInfo.startstationId, passenger.passengerType, passenger.identificationType)}">style="background-color : rgb(239, 238, 238);"</c:if>>
	         <div id="passengerview${status.index}">
		          <div class="check">
	                <input type="checkbox" name="passengers[${status.index}].checkbox" value="${status.index}" id="check${status.index}" <c:if test="${cf:isDisablePassenger(orderPaymentInfo.startstationId, passenger.passengerType, passenger.identificationType)}">disabled="disabled"</c:if>>
                    <input type="hidden" value="${passenger.userId}" id="userId${status.index}" name="passengers[${status.index}].userId">
                    <input type="hidden" value="${passenger.passengerId}" id="passengerId${status.index}" name="passengers[${status.index}].passengerId">
                  </div>
                  <div class="name">
                       ${passenger.fullname}
                       <input type="hidden" value="${passenger.fullname}" id="fullname${status.index}" name="passengers[${status.index}].fullname">
                  <span class="gender">
                      <input type="hidden" value="${passenger.gender}" id="gender${status.index}" name="passengers[${status.index}].gender">
                      ${cf:genderTitle(passenger.gender) }
                  </span>
                  </div>
                  <div class="Mobile-phone">
                     ${passenger.mobile}
                     <input type="hidden" value="${passenger.mobile}" id="mobile${status.index}" name="passengers[${status.index}].mobile">
                  </div>
            
                  <div class="Document-type">
                      ${cf:identificationTypeName(passenger.identificationType)} 
                      ${cf:hiddenIdentificationNumber(passenger.identificationNumber,passenger.identificationType)}
                      <input type="hidden" value="${passenger.identificationType}" id="identificationType${status.index}" name="passengers[${status.index}].identificationType">
                      <input type="hidden" value="${passenger.identificationNumber}" id="identificationNumber${status.index}" name="passengers[${status.index}].identificationNumber">
                  </div>
                  <div class="Dbirth">
                     ${cf:passengerTypeName(passenger.passengerType)} 
                     <input type="hidden" value="${passenger.passengerType}" id="passengerType${status.index}" name="passengers[${status.index}].passengerType">
                  </div>
	         </div>
               <div id="slideview${status.index}" style="display: none;">
                 <div class="name">
                       ${passenger.fullname}
                    <span class="gender">
                        ${cf:genderTitle(passenger.gender) }
                    </span>
                  </div>
                  <div class="Mobile-phone">
                     ${passenger.mobile}
                  </div>
                  <c:if test="${passenger.passengerId != passenger.userId}">
                    <div class="delecte" id="delpassenger${status.index}">删除</div>
                    <div class="edit" id="editpassenger${status.index}">编辑</div>
                </c:if>
                  <div class="Document-type">
                      ${cf:identificationTypeName(passenger.identificationType)} 
                      ${cf:hiddenIdentificationNumber(passenger.identificationNumber,passenger.identificationType)}
                  </div>
                  <div class="Dbirth">
                     ${cf:passengerTypeName(passenger.passengerType)} 
                  </div>
               </div>
	     </li>
        </c:forEach>
      </ul>
      <!-- 隐藏表单 -->
      <input type="hidden" name="schType" value="${orderPaymentInfo.schType}" id="schType">
      <input type="hidden" name="regBusNo" value="${orderPaymentInfo.regBusNo}" id="regBusNo">
      <input type="hidden" name="busTypeName" value="${orderPaymentInfo.busTypeName}" id="busTypeName">
      <input type="hidden" name="startStationName" value="${orderPaymentInfo.startStationName}" id="startStationName">
      <input type="hidden" name="arriveStationName" value="${orderPaymentInfo.arriveStationName}" id="arriveStationName">
      <input type="hidden" name="leaveTime" value="${orderPaymentInfo.leaveTime}" id="leaveTime">
      <input type="hidden" name="leaveDate" value="${orderPaymentInfo.leaveDate}" id="leaveDate">
      <input type="hidden" name="orderId" value="${orderPaymentInfo.orderId}" id="orderId">
      <input type="hidden" name="serviceprice" value="${orderPaymentInfo.serviceprice}" id="serviceprice">
      <input type="hidden" name="totalprices" value="${orderPaymentInfo.totalprices}" id="totalprices">
      <input type="hidden" name="fullTicketNum" value="${orderPaymentInfo.fullTicketNum}" id="fullTicketNum">
      <input type="hidden" name="halfTicketNum" value="${orderPaymentInfo.halfTicketNum}" id="halfTicketNum">
      <input type="hidden" name="freeTicketNum" value="${orderPaymentInfo.freeTicketNum}" id="freeTicketNum">
      <input type="hidden" name="price" value="${orderPaymentInfo.price}" id="price">
      <input type="hidden" name="halfPrice" value="${orderPaymentInfo.halfPrice}" id="halfPrice">
      <input type="hidden" name="orderpnr" value="${orderPaymentInfo.orderpnr}" id="orderpnr">
      <input type="hidden" name="startstationId" value="${orderPaymentInfo.startstationId}" id="startstationId">
      <input type="hidden" name="lineTypeId" id="lineTypeId" value="${orderPaymentInfo.lineTypeId}"/>
      <input type="hidden" name="hasPrivilege" id="hasPrivilege" value="${orderPaymentInfo.hasPrivilege}"/>
      <input type="hidden" name="totalPrivilegeAmount" id="totalPrivilegeAmount" value="${orderPaymentInfo.totalPrivilegeAmount}"/>
      <!-- 判断跳转到支付页面是从订单详情还是乘车人列表 -->
      <input type="hidden" name="refer" value="${constant.refer_ordersubmit}">

      <!-- 乘客信息隐藏表单 -->
      <input type="hidden" name="passengerId" id="passengerId">
     </form>
      <!-- 乘客ID隐藏域列表 -->
      <div id="passengerIds">
      <c:forEach items="${passengerId}" var="passengerid">
          <input type="hidden" value="${passengerid}">
      </c:forEach>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/views/popup_alert.jsp"%>
  <%@ include file="/WEB-INF/views/popup_confirm.jsp"%>
  <%@ include file="/WEB-INF/views/loading.jsp"%>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <script type="text/javascript" src="${ctx}/js/jquery.touchSwipe.min.js?ver=${swipe_min_version}"></script>
  <!-- mergeTo:${ctx}/js/custom.min.js?ver=${custom_min_version} -->
  <script type="text/javascript" src="${ctx}/js/custom.js?ver=${custom_version}"></script>
  <!-- mergeTo -->
  <script type="text/javascript">
       var parentNode;
       var passengerId;
       $(function(){
    	   var passengerli = $("ul").find("li[passenger='passenger']");
    	   var adult = ${constant.passengerType_adult};
    	   var child = ${constant.passengerType_child};
    	   var special = ${constant.passengerType_special};
    	   //判断完成按钮是否隐藏
    	   var orderId = $("#orderId").val();
    	   if(orderId == ""){
    		   $("#passenglistsubmit").css("display","none");
    	   }

    	   passengerli.each(function(i){
    		   $("#editpassenger" + i).on("touchend", function(){
    			   //为隐藏表单设值
                   $("#passengerId").val($("#passengerId" + i).val());
                   $("#form").attr("action","${ctx}/passenger/edit.do").submit();  
    		   });
    		   //删除按钮绑定事件
    		   $("#delpassenger" + i).on("touchend", function(){
    			   passengerId = $("#passengerId" + i).val();
                   parentNode = $(this).parent().parent();
                   openConfirmDialog("确定要删除当前的常用乘客信息吗？", function(){
                       $.ajax({
                           type: "POST",
                           url:"${ctx}/passenger/del.do",
                           data:{passengerId:passengerId},
                           success:function (data){
                               if(data.errcode == 0){
                                  openAlert("删除常用乘客成功", function(){
                                      parentNode.remove();
                                  });                 
                               } else {
                                  openAlert("删除常用乘客失败");
                               }            
                           }
                       });
                   });
    		   });
    	      //屏幕滑动绑定事件
  	          $("#passengerli" + i).swipe({
  	        	  fingers:'all',
  	        	  swipeLeft:function(event, direction, distance, duration, fingerCount) {
  	                  $("#passengerview" + i).css("display","none");
  	        		  $("#slideview" + i).css("display","block");
  	        	  },
  	        	  swipeRight:function(event, direction, distance, duration, fingerCount) {
  	        		  $("#passengerview" + i).css("display","block");
  	        		  $("#slideview" + i).css("display","none");
  	        	  },
  	        	  allowPageScroll:"auto",
  	              threshold:0
  	          });
    	   });
    	   //点击完成绑定单击事件
    	   $("#passenglistsubmit").on("click",function(){
    		   var selectpassengernum = $("ul").find("input[type='checkbox']:checked").length;
    		   var selectpassenger = $("ul").find("input[type='checkbox']:checked");
    		   var fullticketnum = $("#fullTicketNum").val();
    		   var halfticketNum = $("#halfTicketNum").val();
    		   var adultnum = 0;
    		   var childandspecialnum = 0;

    		   selectpassenger.each(function(){
    			   var index = $(this).val();
    			   var passengertype = $("#passengerType" + index).val();
    			   //1表示乘客类型为成人
    			   if(passengertype == adult){
    				   adultnum++;
    			   }
    			   if(passengertype == child || passengertype == special){
    				   childandspecialnum++;
    			   }
    		   });
               if(selectpassengernum == 0){
                   openAlert("请选择一个乘客");
                   return false;
               }
               if(adultnum != fullticketnum || childandspecialnum != halfticketNum){
            	   openAlert("票数和已选乘客数量或类型不符！");
            	   return false;
               }
               $("#form").attr("action","${ctx}/bindpassenger/index.do").submit();
    	   });
    	   //显示那些乘客是已经选择
    	   $("#passengerIds").find("input").each(function(x){
    		   var passengeridselect = $(this).val();
    		   passengerli.each(function(i){
    			   var passengerid = $("#passengerId" + i).val();

    			   if(passengeridselect == passengerid){
    				   $("#check"+i).attr("checked","checked");
    			   }
    		   });
    	   });

    	   //添加乘客按钮绑定单击事件
    	   $("#addpassenger").bind("click",function(){
    		   $("#form").attr("action","${ctx}/passenger/new.do").submit();
    	   });

    	   //返回按钮绑定单击事件
    	   $("#back").bind("click",function(){
    		   $("#form").attr("action","${ctx}/passenger/toaddpassenger.do").submit();
    	   });
       });
  </script>
</body>
</html>